<template>
	<view class="changedetail">
		<u-toast ref="uToast" />
		<u-row gutter="0" class="map-search-box">
			<u-col span="10">
				<view class="search-input-box">
					<view class="select-city">{{city}}
					</view>
					<u-input class="search-input" v-model="search" type="text" />
					<view class="search-btn" @click="searchStation">
						<u-icon name="search" color="#ababab" size="40"></u-icon>
					</view>

				</view>
			</u-col>
			<u-col span="2" text-align="right">
				<view @click="list" class="list"></view>
			</u-col>
		</u-row>
		<view class="changedetail-card" v-if="info != ''">
			<view class="changelist-card-title">
				{{info.name}} <span :class="['status',{'status-ok':info.status==1}]">正常营业</span>
			</view>
			<view class="changelist-card-address1">
				站点地址：{{info.address}}
			</view>
			<view class="changelist-card-attr">
				<view class="changelist-card-attr-item1 item1">排队：10</view>
				<view class="changelist-card-attr-item1 item2">距离:{{Math.round(info.distance/1000*100)/100}}km</view>
				<view class="changelist-card-attr-item1 item3">电池：20</view>
			</view>
			<view class="changelist-card-date1">
				营业时间:00:00:00 - 23:00:00
			</view>
			<view class="battery">
				<span>电池详情</span>
				<view class="battery-item">
					<view class="battery-item-1 color-949799">名称</view>
					<view class="battery-item-2 color-949799">类型</view>
					<view class="battery-item-3 color-949799">数量</view>
				</view>
				<view class="battery-item" v-for="item in info.batteryVoList">
					<view class="battery-item-1">{{item.code}}</view>
					<view class="battery-item-2">{{item.type}}</view>
					<!-- <view class="battery-item-3">{{item.positionCode}}</view> -->
				</view>

			</view>
			<view class="changedetail-opt">
				<button class="changedetail-opt-1">联系</button>
				<button class="changedetail-opt-2" @click="drive(info)">导航</button>
			</view>
		</view>
		<view class="changedetail-card" v-if="info == ''">
			<!-- <view class="changelist-card-title">
				423432 <span :class="['status',{'status-ok':1==1}]">正常营业</span>
			</view>
			<view class="changelist-card-address1">
				站点地址：23123123123213
			</view>
			<view class="changelist-card-attr">
				<view class="changelist-card-attr-item1 item1">排队：10</view>
				<view class="changelist-card-attr-item1 item2">距离:{{Math.round(1/1000*100)/100}}km</view>
				<view class="changelist-card-attr-item1 item3">电池：20</view>
			</view>
			<view class="changelist-card-date1">
				营业时间:00:00:00 - 23:00:00
				<view class="shoufei">停车收费</view>
			</view>
			<view class="battery">
				<span>电池详情</span>
				<view class="battery-item">
					<view class="battery-item-1 color-949799">名称</view>
					<view class="battery-item-2 color-949799">电量</view>
					<view class="battery-item-3 color-949799">数量</view>
				</view>


			</view>
			<view class="changedetail-opt">
				<button class="changedetail-opt-1">联系</button>
				<button open-type="launchApp" class="changedetail-opt-2" @click="drive()">导航</button>
			</view> -->
		</view>



	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	let _this;
	export default {
		data() {
			return {
				city: '',
				longitude: '',
				latitude: '',
				info: '',
				search: '',
				batteryType: ''
			}
		},

		created() {
			_this = this;
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.longitude = option.longitude; //打印出上个页面传递的参数。
			this.latitude = option.latitude; //打印出上个页面传递的参数。
			this.city = option.city; //打印出上个页面传递的参数。
			console.log(_this.latitude);
		},
		computed: mapState(['hasLogin', 'userName', 'token']),
		mounted() {
			this.batteryType = uni.getStorageSync('battery_type');
			this.get_info();
		},
		methods: {
			drive(info){
				uni.openLocation({
					latitude: info.latitude,
					longitude: info.longtitude,
					scale: 18
				})
			},
			searchStation() {
				uni.navigateTo({
					url: './list?city=' + this.city + '&latitude=' + _this.latitude + '&longitude=' + _this.longitude + '&search=' +
						_this.search
				});
			},
			list() {
				uni.navigateBack({
					delta: 1
				});
			},
			get_info() {
				
				uni.request({
					url: this.$store.state.ip + 'station/station/navigationBySystem', //仅为示例，并非真实接口地址。
					data: JSON.stringify({
						"provinceName": this.city,
						"latitude": this.latitude,
						"longtitude": this.longitude,
						"batteryType": 'EA-10000'
					}),
					method: 'POST',
					header: {
						'Authorization': 'Bearer ' + this.token,
					},
					success: (res) => {
						if (res.data.code == 200) {
							_this.info = res.data.data;
						} else if (res.data.code == '040081') {

							_this.$refs.uToast.show({
								title: '登录过期，请重新登录',
								url: '/pages/login/login',
								duration: 2000,
								position: 'bottom',
								params: {
									id: 1,
									menu: 3
								}
							})

							console.log(res);
						} else{
							_this.$refs.uToast.show({
								title: res.data.msg,
								duration: 2000,
								position: 'bottom',
							})
							
						}


					},
					fail: (res) => {
						console.log(res);
					}
				});
			}
		}
	}
</script>

<style>
	.changedetail {
		width: 100%;
	}

	.map-search-box {
		position: absolute;
		top: 20px;
		height: 50px;
		width: 100%;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.select-city {
		position: absolute;
		top: 0;
	}

	.search-input-box {
		border-radius: 50px;
		height: 48px;
		background-color: #fff;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
	}

	.list {
		float: right;
		width: 52px;
		height: 52px;
		background: url('../../static/img/btn_list_n.png');
	}

	.list:active {
		border: none;
		background: url('../../static/img/btn_list_s.png');
	}

	.select-city {
		height: 48px;
		line-height: 52px;
		margin-left: 15px;
		font-size: 14px;
		float: left;
		width: 70px;
	}

	.search-input {
		float: left;
		margin-left: 90px;
		margin-top: 7px;
		width: 140px;
	}

	.search-btn {
		float: right;
		padding: 13px 15px;
	}

	.changedetail-card {
		border-top: 1px solid #DEDFE2;
		clear: left;
		padding-top: 21px;
		margin-top: 90px;
	}

	.changelist-card-title {
		padding-left: 15px;
		padding-right: 15px;
	}

	.changelist-card-title .status {
		float: right;
		font-size: 16px;

	}

	.changelist-card-title .status-ok {
		color: #27cc16;
	}

	.changelist-card-title .tips {
		border: 1px solid #adb0b3;
		border-radius: 4px;
		color: #949799;
		font-size: 10px;
		padding: 2px;
	}

	.changelist-card-address {
		margin-top: 22px;
		margin-bottom: 22px;
		font-size: 13px;
		color: #35374b;
		padding-left: 15px;
		padding-right: 15px;
	}

	.changelist-card-address1 {
		margin-top: 22px;
		margin-bottom: 22px;
		font-size: 14px;
		color: #35374b;
		padding-left: 15px;
		padding-right: 15px;
	}

	.changelist-card-attr {
		overflow: auto;
		margin-bottom: 18px;
		padding-left: 15px;
		padding-right: 15px;
	}

	.changelist-card-attr-item {
		float: left;
		width: 33.3%;
		font-size: 13px;
		color: #35374b;
	}

	.changelist-card-attr-item1 {
		float: left;
		width: 33.3%;
		font-size: 14px;
		color: #35374b;
	}

	.changelist-card-attr .item2 {
		text-align: center;
	}

	.changelist-card-attr .item3 {
		text-align: right;
	}

	.changelist-card-date {
		color: #949799;
		font-size: 13px;
		padding-left: 15px;
		padding-right: 15px;
		margin-bottom: 17px;
	}

	.changelist-card-date1 {
		color: #35374b;
		font-size: 14px;
		padding-left: 15px;
		padding-right: 15px;
		margin-bottom: 17px;
	}

	.shoufei {
		float: right;
	}

	.changelist-opt {
		height: 39px;
		background-color: #e6e8eb;
		border-radius: 0 0 4px 4px;
		text-align: right;
		line-height: 39px;
	}

	.changelist-opt span {
		border-radius: 16px;
		font-size: 12px;
		padding: 3px 12px;
		margin-right: 12px;
	}

	.changelist-opt-span2 {
		color: #1869e0;
		border: 1px solid #1869e0;
	}

	.changelist-opt-span1 {
		color: #35374b;
		border: 1px solid #676a85;
	}

	.battery {
		height: 200px;
		background-color: #f5f5f5;
		border-radius: 4px;
		margin: 12px;
		padding: 15px;
		overflow: auto;
	}

	.battery-item {
		margin-top: 18px;
		font-size: 13px;
		color: #35374B;
		overflow: auto;
	}

	.battery-item-1 {
		float: left;
		width: 33.33%;

	}

	.battery-item-2 {
		float: left;
		text-align: center;
		width: 33.33%;
	}

	.battery-item-3 {
		float: left;
		text-align: right;
		width: 33.33%;
	}

	.color-949799 {
		color: #949799;
	}

	.changedetail-opt {
		margin: 30px 27px 0 27px;
		text-align: center;
	}

	.changedetail-opt span,.changedetail-opt button {
		height: 44px;
		line-height: 44px;
		display: inline-block;
		padding-left: 50px;
		padding-right: 50px;
		border-radius: 30px;
	}

	.changedetail-opt-1 {
		margin-right: 11px;
		border: 1px solid #35354b;
	}

	.changedetail-opt-2 {
		margin-left: 11px;
		color: #1869E0;
		border: 1px solid #1869E0;
	}

	.changedetail-opt span:hover {
		background-color: #1869E0;
		color: #fff;
	}
</style>
